<template>
  <view class="medical-container">
    <!-- 顶部导航 - 全新设计 -->
    <view class="medical-tabs">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index" 
        class="tab-item"
        :class="{ active: currentTab === index }"
        @tap="switchTab(index)"
      >
        <text class="tab-text">{{ tab.name }}</text>
        <view class="tab-indicator"></view>
      </view>
    </view>

    <!-- 内容区 - 添加过渡效果 -->
    <swiper 
      class="medical-content" 
      :current="currentTab" 
      @change="swiperChange"
      :duration="300"
    >
      <!-- 找医院 -->
      <swiper-item>
        <hospital-list ref="hospitalList" />
      </swiper-item>
      
      <!-- 找科室 -->
      <swiper-item>
        <department-list ref="departmentList" />
      </swiper-item>
      
      <!-- 找医生 -->
      <swiper-item>
        <doctor-list ref="doctorList" />
      </swiper-item>
      
      <!-- 找陪诊 -->
      <swiper-item>
        <therapist-list ref="therapistList" />
      </swiper-item>
    </swiper>

    <!-- 名医推荐 -->
    <view class="doctor-section" v-if="doctors.length > 0">
      <view class="section-title">名医推荐</view>
      <view class="doctor-list">
        <view class="doctor-card" v-for="doctor in doctors" :key="doctor.id" @tap="goToDoctorDetail(doctor)">
          <image 
            :src="config.staticUrl + (doctor.imgUrl || '/static/images/default-avatar.png')" 
            class="doctor-avatar" 
            mode="aspectFill"
          ></image>
          <view class="doctor-info">
            <text class="doctor-name">{{ doctor.name }}</text>
            <text class="doctor-title">{{ doctor.jobTitle }}</text>
            <text class="doctor-dept">{{ doctor.departmentName }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import HospitalList from './hospital-list.vue'
import DepartmentList from './department-list.vue'
import DoctorList from './doctor-list.vue'
import TherapistList from './therapist-list.vue'
import { selectDoctorByDepartmentId } from '@/api/doctor'
import config from '@/config'

export default {
  components: {
    HospitalList,
    DepartmentList,
    DoctorList,
    TherapistList
  },
  data() {
    return {
      currentTab: 0,
      tabs: [
        { name: '找医院' },
        { name: '找科室' },
        { name: '找医生' },
        { name: '找陪诊' }
      ],
      doctors: [],
      config: config,
      loading: false
    }
  },
  methods: {
    switchTab(index) {
      this.currentTab = index
    },
    swiperChange(e) {
      this.currentTab = e.detail.current
    },
    async goToDoctorDetail(doctor) {
      // Implement the logic to go to doctor detail page
    }
  }
}
</script>

<style lang="scss">
/* 使用SCSS变量管理主题色 */
$primary-color: #1E90FF;  // 医疗蓝
$secondary-color: #F5F5F5; // 浅灰
$active-color: #32CD32;   // 活跃绿色
$text-color: #333;       // 主要文字
$inactive-text: #999;    // 非活跃文字
$bg-color: #FFFFFF;      // 白色背景

.medical-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: $bg-color;
}

/* 全新设计的顶部导航 */
.medical-tabs {
  display: flex;
  height: 100rpx;
  background-color: $bg-color;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 10;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: all 0.3s ease;
  
  .tab-text {
    font-size: 32rpx;
    color: $inactive-text;
    transition: all 0.3s ease;
    font-weight: 500;
  }
  
  .tab-indicator {
    position: absolute;
    bottom: 0;
    width: 60rpx;
    height: 6rpx;
    background: transparent;
    border-radius: 3rpx;
    transition: all 0.3s ease;
  }
  
  &.active {
    .tab-text {
      color: $primary-color;
      font-weight: bold;
      transform: scale(1.1);
    }
    
    .tab-indicator {
      background: $primary-color;
    }
  }
}

/* 内容区域改进 */
.medical-content {
  flex: 1;
  background-color: $bg-color;
  
  swiper-item {
    padding: 20rpx;
    box-sizing: border-box;
  }
}

/* 添加全局动画效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>